<template>
  <div class="pickerStyle">
    <el-date-picker
      v-model="dateArr[0]"
      type="date"
      value-format="yyyy-MM-dd"
      format="yyyy-MM-dd"
      :placeholder="placeholderSta"
      :picker-options="pickerStartTime"
      @change="DateChangeSta"
    ></el-date-picker>
    <span>至</span>
    <el-date-picker
      v-model="dateArr[1]"
      type="date"
      value-format="yyyy-MM-dd"
      format="yyyy-MM-dd"
      :placeholder="placeholderEnd"
      :picker-options="pickerEndTime"
      @change="DateChangeEnd"
    ></el-date-picker>
  </div>
</template>
<script>
/**
 * @file: 日期区间组件
 * @author: lwj
 * @date: 2021-03-01
 * @description: ''
 * @api: placeholderSta : 第一个选择框的提示词     默认值:开始日期
 * @api: placeholderEnd : 第二个选择框的提示词     默认值:结束日期
 */
export default {
  model: {
    prop: "dateArr", // 父組件v-model的值
    even: "date_change" // $emit事件的名称
  },
  props: {
    placeholderSta: {
      // 提示词
      type: String,
      default: "开始日期"
    },
    placeholderEnd: {
      // 提示词
      type: String,
      default: "结束日期"
    },
    dateArr: {
      default: [],
      type: Array
    }
  },
  computed: {
    pickerStartTime() {
      let _this = this;
      return {
        disabledDate: time => {
          if (_this.dateArr[1]) {
            let edtTime = _this.dateArr[1].replace(/-/g, "/");
            return time.getTime() > new Date(edtTime);
          } else {
            return time.getTime() > Date.now();
          }
        }
      };
    },
    pickerEndTime() {
      let _this = this;
      return {
        disabledDate: time => {
          if (_this.dateArr[0]) {
            let startTime = _this.dateArr[0].replace(/-/g, "/");
            return (
              time.getTime() < new Date(startTime) ||
              time.getTime() > Date.now()
            );
          } else {
            return time.getTime() > Date.now();
          }
        }
      };
    }
  },
  data() {
    return {
    };
  },
  methods: {
    DateChangeSta(val) {
      this.dateArr[0] = val;
      this.$emit("date_change", this.dateArr); // 向model里面的prop的dateArr传送值
    },
    DateChangeEnd(val) {
      this.dateArr[1] = val;
      this.$emit("date_change", this.dateArr); // 向model里面的prop的dateArr传送值
    }
  },
};
</script>	
<style lang="less">
.pickerStyle {
  display: inline-block;
}
</style>
